<template>
  <div>
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 20,50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :url="url">
     </el-pagination>
  </div>
</template>
<script>
export default{
  name:'Pagination2',
  props:{
   // 总页数
   total: {
    type: Number,
    default: 1000,
    required: false
   },
    url:{
      type:String,
      default:''
    },
    // 单页数据量
    pageSize: {
      type: Number,
      default: 10,
      required: false
    },
    // 当前页码
    currentPage: {
      type: Number,
      default: 1,
      required: false
    },
  },
  data(){
    return{

    }
  },
  methods:{
    // 分页  1: 1-10 2:11-20 slice((当前页数-1)*每页条数,当前页数*当前条数)
     // 改变每页显示几条
    //  handleSizeChange(val) {
    //     //console.log('pageSize3333',this.newPageSize);
    //     this.pageSize = val;
    //     this.currentPage = 1;
    //     this.$emit('handleChange',val)
    //  },
    //  // 改变页数 第几页  改变页数的时候 才会执行
    //  handleCurrentChange(val) {
    //     this.currentPage = val;
    //     this.$emit('handleChange',val)
    //  },
     // 错误点  在 handleCurrentChange handleSizeChange 方法里只要负责把新值传给 父组件就可以了  不要在这里面 执行其他操作 不然会报错
     // 以下两个函数均是触发父组件的handleChange事件，从而实现点击分页的功能按钮后，把最新的 pageSize currentPage 传给父组件 要传2个参数
     // 记得要传2个参数  如果只传一个 另一个会是undefined  还有不需要 执行 this.currentPage = currentPage; 这样的操作 不然会报错
     handleCurrentChange(currentPage) {
        this.$emit('handleChange', this.pageSize, currentPage)
      },
      handleSizeChange(pageSize) {
        this.$emit('handleChange', pageSize,this.currentPage)
      }
  },
}
</script>

<style lang="scss" scoped>
.el-pagination{
    margin-top:20px;
  }

</style>